<!-- 
    --由于实际展示需要，列表组件实际上就是横向排列的卡片
    --加上room数据稀少，为了方便展示所有酒店的房间列表统一查询 hotel_id为5的酒店对应的房间数据
-->

<template>
    <div class="RoomLists">
        <el-row style="
        width: 90%;
        height: 300px;
      ">
            <el-col :span="8" v-for="l in list" :key="l.rooms.roomId">
                <div style="width: 75%;margin-bottom: 20px;">
                    <el-card :body-style="{ padding: '0px' }" shadow="hover" style="display: flex;justify-content: space-around;">
                        <div style="height: 300px">
                            <img :src="l.pictures.picLink" class="image" style="width: 100%; height: 100%" />
                        </div>
                        <!-- 详细信息 -->
                        <div style="padding: 14px">
                            <el-descriptions :title="l.rooms.roomDescription" size="mini" column=2>
                                <el-descriptions-item label="床型">
                                    大床1.8米
                                </el-descriptions-item>
                                <el-descriptions-item label="餐食">
                                    无早
                                </el-descriptions-item>
                                <el-descriptions-item label="房间描述">
                                    大床1.8米、1-4层楼、15平方米、可入住两人
                                </el-descriptions-item>
                                <el-descriptions-item label="预订须知">
                                    预定当晚六点之前可以全额退房，六点之后不可退房，一晚时间到第二日十二点截至
                                </el-descriptions-item>
                                <el-descriptions-item label="价格">{{
                                    l.rooms.roomPrice
                                }} 元/夜</el-descriptions-item>
                                <el-descriptions-item label="标签">
                                    <el-tag size="small">舒适型房间</el-tag>
                                </el-descriptions-item>
                            </el-descriptions>
                            <!-- 评分与进入详情页按钮 -->
                            <div class="bottom clearfix">
                                <el-rate v-model="rating" disabled show-score text-color="#ff9900">
                                </el-rate>
                                <div style="display: flex; float: right; margin-bottom: 10px">
                                    <orderbutton :ordersBasic="ordersBasic"></orderbutton>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import orderbutton from "@/components/buttons/orderButton.vue";
export default {
    name: 'roomlists',
    components:{
        orderbutton,
    },
    props:{
        roomlist:Object,
    },
    data() {
        return {
            hotelId: 5,
            list: [],
            rating:3.9,
            // orderbutton
            ordersBasic: {},
        }
    },
    methods: {
        // 查询房间列表
        queryAllRoomsByHotelId() {
            this.$api.roomsApi.queryAllRoomsByHotelId({ hotelId: this.hotelId }).then(res => {
                this.list = res.data.data;
            })
        },
        // 设置下单参数
        setOrderBasic(){
            this.ordersBasic.orderStatus = 0;
            this.ordersBasic.transactionType = 3;
            this.ordersBasic.transactionId = this.roomlist.hotelId;

            this.ordersBasic.orderTotalAmount = this.list[0].rooms.roomPrice;
            this.ordersBasic.Name = this.list[0].rooms.roomDescription;
            // console.log(this.roomlist);
        },
    },
    watch: {
    list: {
      immediate: true,
      deep: true,
      handler(newV, oldV) {
        this.setOrderBasic();
      },
    },
  },
    mounted() {
        this.queryAllRoomsByHotelId();
    },
}
</script>

<style scoped>
/* element ui card */
.time {
    font-size: 13px;
    color: #999;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    float: right;
}

.image {
    width: 100%;
    display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both;
}

/* 自定义 */
.RoomLists {
    font-family: serif;
}
</style>